<template>
	<view @click.stop="to_collect" class="collect-btn-container">
		<!-- .stop 修饰符 停止冒泡到父组件上 -->
		<uni-icons :type="is_collect ? 'heart-filled' : 'heart'" color="#f25037" :size="size" />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "CollectBtn",
		props: {
			article_id: String,
			size: {
				type: String,
				default: '20'
			}
		},
		computed: {
			is_collect() {
				return this.user_info?.article_likes_ids.includes(this.article_id);
			},
		},
		methods: {
			async to_collect() {
				if (!this.check_login()) return;
				// 如果有用户信息，说明是登录状态，
				const {
					msg,
					user_info
				} = await this.$http.collect_article({
					user_id: this.user_info._id,
					article_id: this.article_id
				})
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				this.$store.commit('set_user_info', user_info)
			}
		}
	}
</script>
